import Image from "next/image";
import { type HowStep } from "@/base-framework/types/landing";

export default function How({ steps }: { steps: HowStep[] }) {
  if (!steps?.length) return null;
  return (
    <section id="how" aria-labelledby="how-title" className="w-full">
      <div className="mx-auto max-w-screen-xl px-6 py-16">
        <h2 id="how-title" className="text-2xl md:text-3xl font-semibold mb-8">
          Simple 3 Steps to Create
        </h2>
        <ol className="grid gap-6 md:grid-cols-3 list-decimal list-inside">
          {steps.map((s, i) => (
            <li
              key={i}
              className="rounded-xl border border-black/10 dark:border-white/15 p-5"
              aria-posinset={i + 1}
              aria-setsize={steps.length}
            >
              <div className="mb-3">
                {s.media?.type === "image" && (
                  <div className="relative w-full h-auto" style={{ maxWidth: s.media.width ?? 64, aspectRatio: "auto" }}>
                    <Image
                      src={s.media.src}
                      alt={s.media.alt ?? ""}
                      width={s.media.width ?? 64}
                      height={s.media.height ?? 64}
                      className="w-full h-auto"
                      style={{ width: "100%", height: "auto" }}
                    />
                  </div>
                )}
              </div>
              <h3 className="text-lg font-medium">{s.title}</h3>
              <p className="text-sm text-foreground/80">{s.desc}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
